import { computed, ref } from "vue";
// 获取小程序导航栏高度 和设置默认值兼容 h5
export function useSystemHook() {
  const system = ref<UniApp.GetSystemInfoResult>(uni.getSystemInfoSync());
  const menuButtonInfo = ref<UniApp.GetMenuButtonBoundingClientRectRes>();
  try {
    menuButtonInfo.value = uni.getMenuButtonBoundingClientRect();
  } catch (err) {}

  /**
   * 状态栏
   */
  const allSystemSize = computed(() => {
    const statusBarHeight = system.value?.statusBarHeight || 22;
    const menuHeight = menuButtonInfo.value?.height || 33;
    const menuTop = menuButtonInfo.value?.top || 24;
    const navigatorHeight = (menuTop - statusBarHeight) * 2 + menuHeight;
    const totalHeight = statusBarHeight + navigatorHeight;
    const screenHeight = system.value.screenHeight;
    const bodyHeight = screenHeight - totalHeight;
    const tabBarHeight = screenHeight - (system.value.safeArea?.bottom || 0);
    const notabHeight = bodyHeight - tabBarHeight;
    const noTabHeadHeight = bodyHeight - tabBarHeight - totalHeight;
    const bottonWidth = menuButtonInfo.value?.width || 100
    const right= system.value.windowWidth - (menuButtonInfo.value?.right || 10)
    const bottonOverWidth= (menuButtonInfo.value?.left || 300) - 40
    
    return {
      statusBarHeight, //状态栏高度
      menuHeight, //胶囊高度
      menuTop, //胶囊与顶部的距离
      navigatorHeight, //导航栏高度= （胶囊顶部距离-状态栏高度） x 2 + 胶囊的高度
      totalHeight, //总高度 = 状态栏的高度 + 导航栏高度
      screenHeight, // 可视区域高度
      bodyHeight, // 没tabbar的内容区域高度
      tabBarHeight, // tabbar高度
      notabHeight, // 有tabbar的内容区域高度
      noTabHeadHeight,
      bottonOverWidth
    };
  });

  /**
   * 没有头部的tab样式
   */
  const noHeadHeightStyle = computed(() => {
    return {
      height: allSystemSize.value.bodyHeight + "px",
      paddingTop: allSystemSize.value.totalHeight + "px",
    };
  });
  const pageStyleTopStyle=computed(()=>{
    return {
      height:allSystemSize.value.totalHeight +'px',
      width:'100%'
    }
  })

  return {
    system,
    menuButtonInfo,
    allSystemSize,
    noHeadHeightStyle,
    pageStyleTopStyle
  };
}
